<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>try分页</title>
  <link rel="stylesheet" href="./styles/bootstrap.min.css">
</head>
<body>
<div id="try">
  <p>{{ msg }}</p>
  <table class="table table-responsive">
    <tbody>
    <tr v-for="list in listData">
      <td>{{ list.id }}</td>
    </tr>
    </tbody>
  </table>
</div>

<script src="./javascripts/jquery-1.9.1.min.js"></script>
<script src="./javascripts/vue.min.js"></script>
<script src="./javascripts/axios.min.js"></script>
<script>
  let app = new Vue({
    el: '#try',
    data() {
      return {
        msg: 'try',
        listData: ''
      }
    },
    methods: {
      // 查询
      getList(){
        var _this = this;
        axios.get('http://cnodejs.org/api/v1/topics?page=1')
          .then(function (response) {
            console.log("+++++",_this.listData);
            _this.listData = response.data.data;
            console.log("------",_this.listData);
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    created: function(){
      console.log("创建实例---")
      this.getList();
    }
  })
</script>


</body>
</html>